```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>五子棋</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            font-family: Arial, sans-serif;
            background-color: #f5f5dc;
        }
        h1 {
            color: #8b4513;
        }
        #game-container {
            position: relative;
            margin: 20px;
        }
        #board {
            background-color: #deb887;
            display: grid;
            grid-template-columns: repeat(15, 40px);
            grid-template-rows: repeat(15, 40px);
            border: 2px solid #8b4513;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        .cell {
            width: 40px;
            height: 40px;
            box-sizing: border-box;
            position: relative;
            cursor: pointer;
        }
        .cell::before, .cell::after {
            content: '';
            position: absolute;
            background-color: #000;
        }
        .cell::before {
            width: 100%;
            height: 1px;
            top: 50%;
            left: 0;
        }
        .cell::after {
            width: 1px;
            height: 100%;
            left: 50%;
            top: 0;
        }
        .black, .white {
            position: absolute;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            top: 4px;
            left: 4px;
            z-index: 1;
        }
        .black {
            background-color: #000;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
        }
        .white {
            background-color: #fff;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        }
        #status {
            margin-top: 20px;
            font-size: 24px;
            color: #8b4513;
        }
        #restart {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            background-color: #8b4513;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        #restart:hover {
            background-color: #a0522d;
        }
    </style>
</head>
<body>
    <h1>五子棋</h1>
    <div id="game-container">
        <div id="board"></div>
    </div>
    <div id="status">黑方回合</div>
    <button id="restart">重新开始</button>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const board = document.getElementById('board');
            const statusDisplay = document.getElementById('status');
            const restartButton = document.getElementById('restart');
            
            let currentPlayer = 'black';
            let gameState = Array(15).fill().map(() => Array(15).fill(null));
            let gameActive = true;
            
            // 创建棋盘
            function createBoard() {
                board.innerHTML = '';
                for (let i = 0; i < 15; i++) {
                    for (let j = 0; j < 15; j++) {
                        const cell = document.createElement('div');
                        cell.classList.add('cell');
                        cell.dataset.row = i;
                        cell.dataset.col = j;
                        cell.addEventListener('click', handleCellClick);
                        board.appendChild(cell);
                    }
                }
            }
            
            // 处理点击事件
            function handleCellClick(e) {
                if (!gameActive) return;
                
                const row = parseInt(e.target.dataset.row);
                const col = parseInt(e.target.dataset.col);
                
                if (gameState[row][col] !== null) return;
                
                gameState[row][col] = currentPlayer;
                renderPiece(row, col, currentPlayer);
                
                if (checkWin(row, col)) {
                    statusDisplay.textContent = `${currentPlayer === 'black' ? '黑方' : '白方'}获胜!`;
                    gameActive = false;
                    return;
                }
                
                currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
                statusDisplay.textContent = `${currentPlayer === 'black' ? '黑方' : '白方'}回合`;
            }
            
            // 渲染棋子
            function renderPiece(row, col, player) {
                const cell = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
                const piece = document.createElement('div');
                piece.classList.add(player);
                cell.appendChild(piece);
            }
            
            // 检查胜利条件
            function checkWin(row, col) {
                const directions = [
                    [0, 1],   // 水平
                    [1, 0],   // 垂直
                    [1, 1],   // 对角线
                    [1, -1]   // 反对角线
                ];
                
                for (const [dx, dy] of directions) {
                    let count = 1;
                    
                    // 正向检查
                    for (let i = 1; i < 5; i++) {
                        const newRow = row + i * dx;
                        const newCol = col + i * dy;
                        if (newRow < 0 || newRow >= 15 || newCol < 0 || newCol >= 15 || 
                            gameState[newRow][newCol] !== currentPlayer) {
                            break;
                        }
                        count++;
                    }
                    
                    // 反向检查
                    for (let i = 1; i < 5; i++) {
                        const newRow = row - i * dx;
                        const newCol = col - i * dy;
                        if (newRow < 0 || newRow >= 15 || newCol < 0 || newCol >= 15 || 
                            gameState[newRow][newCol] !== currentPlayer) {
                            break;
                        }
                        count++;
                    }
                    
                    if (count >= 5) return true;
                }
                
                return false;
            }
            
            // 重新开始游戏
            function restartGame() {
                gameState = Array(15).fill().map(() => Array(15).fill(null));
                currentPlayer = 'black';
                gameActive = true;
                statusDisplay.textContent = '黑方回合';
                createBoard();
            }
            
            restartButton.addEventListener('click', restartGame);
            
            // 初始化游戏
            createBoard();
        });
    </script>
</body>
</html>
```